<template>
  <div data-v-ebf288fb="">
    <div>
      <div class=" mt20">
        <ksd-banner-channel :type="4" ref="bannerRef" :height="200"></ksd-banner-channel>
      </div>
      <div class="el-row" style="" type="flex">
        <div class="el-col el-col-24" style="background:var(--bg-color);padding:15px 30px;">
          <div class="el-row is-justify-space-between is-align-middle"
               style="border-bottom:1px solid #f0f0f0;height:60px;">
            <div class="el-col el-col-6" style=""><span
                style="font-size:16px;font-weight:700;margin-right:10px;">数据总览</span></div>
            <div class="el-col el-col-7" style="text-align:right;"><span
                style="font-size:13px;opacity:.5;">当日数据可能存在1~24小时延迟</span></div>
          </div>
          <div class="el-row view-box" style="">
            <nuxt-link to="/user/wallet" class="view-item" title="点击充值">
              <div class="view-item">
                <p class="title">学习币</p>
                <p class="num flex">
                  <animated-number
                      from="0"
                      :to="userInfo.coin"
                      :key="userInfo.coin">
                  </animated-number><span class="fz12 pr tp5 ml5">(个)</span>
                </p>
              </div>
            </nuxt-link>
            <div class="view-item" v-if="userInfo.authorFlag==1">
              <nuxt-link to="/user/social/list" class="view-item">
                <p class="title">发表文章</p>
                <p class="num flex">
                  <animated-number
                      from="0"
                      :to="userState.bbscount"
                      :key="userState.bbscount">
                  </animated-number><span class="fz12 pr tp5 ml5">(篇)</span>
                </p>
              </nuxt-link>
            </div>
            <div class="view-item">
              <nuxt-link to="/user/course/list" class="view-item">
                <p class="title">学习课程</p>
                <p class="num flex">
                  <animated-number
                      from="0"
                      :to="userState.coursecount"
                      :key="userState.coursecount">
                  </animated-number><span class="fz12 pr tp5 ml5">(个)</span>
                </p>
              </nuxt-link>
            </div>
            <div class="view-item">
              <div class="view-item">
                <p class="title">注册天数</p>
                <p class="num flex">
                  <animated-number
                      from="0"
                      :to="userInfo.regDays"
                      :key="userInfo.regDays">
                  </animated-number><span class="fz12 pr tp5 ml5">(天)</span>
                </p>
              </div>
            </div>
            <div class="view-item" v-if="userInfo.teacherFlag==1">
              <div class="view-item">
                <p class="title">是否老师</p>
                <p class="num">
                 是
                </p>
              </div>
            </div>
            <nuxt-link to="/user" class="view-item" title="点击签约作者" v-if="userInfo.authorFlag==1">
              <div class="view-item">
                <p class="title">是否作者</p>
                <p class="num">
                  {{userInfo.authorFlag==1?"是":"否"}}
                </p>
              </div>
            </nuxt-link>
            <div class="view-item" v-if="false">
              <nuxt-link to="/user/fans/list" class="view-item">
                <p class="title">粉丝数</p>
                <p class="num">
                  <animated-number
                      from="0"
                      :to="userState.fanscount"
                      :key="userState.fanscount">
                  </animated-number>
                </p>
              </nuxt-link>
            </div>
            <div class="view-item" v-if="false">
              <nuxt-link to="/user/fans/list" class="view-item">
                <p class="title">我的关注</p>
                <p class="num">
                  <animated-number
                      from="0"
                      :to="userState.gzcount"
                      :key="userState.gzcount">
                  </animated-number>
                </p>
              </nuxt-link>>
            </div>
          </div>
        </div>
      </div>
      <div class="el-row" style="" type="flex">
        <div class="el-col el-col-24 stats" style="">
          <div class="el-row is-justify-space-between is-align-middle"
               style="border-bottom:1px solid #f0f0f0;height:60px;">
            <div class="el-col el-col-6" style=""><span
                style="font-size:16px;font-weight:700;margin-right:10px;">用户学习统计分析</span></div>
            <div class="el-col el-col-6" style="text-align:right;">
              <div class="el-radio-group" role="radiogroup" aria-label="radio-group" id="el-id-100-2">
                <label class="el-radio-button is-active el-radio-button--small" @click="handleChangeDay(7)"><input
                    class="el-radio-button__original-radio" value="7" type="radio" name="el-id-100-0"
                    checked=""><span class="el-radio-button__inner"
                                     style="background-color:;border-color:;box-shadow:;color:;">7天
                        </span></label>
                <label class="el-radio-button el-radio-button--small" @click="handleChangeDay(14)"><input
                  class="el-radio-button__original-radio" value="14" type="radio" name="el-id-100-0"><span
                  class="el-radio-button__inner" style="">14天</span></label>

                <label  class="el-radio-button el-radio-button--small" @click="handleChangeDay(30)"><input class="el-radio-button__original-radio"
                                                                        value="30" type="radio"
                                                                        name="el-id-100-0"><span
                  class="el-radio-button__inner" style="">30天</span></label></div>
            </div>
          </div>
          <div style="height: 500px; width: 100%; user-select: none;  position: relative;" id="mainecharts">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
const userState = ref({bbscount: 0})
const dayRef = ref(7)
const myChartRef = ref(null)
const  userInfo = ref({})
const userStore = useStore.userState()
const handleGetUserInfo = async ()=>{
  try {
    if(!userStore.isLogin)return;
    const resp = await useLoadUserGetApi()
    userInfo.value = resp.data
    userInfo.value.regDays = resp.data.regDays || 1
    userStore.uuid = resp.data.uuid
    userStore.username = resp.data.username
    userStore.nickname = resp.data.nickname
    userStore.avatar = resp.data.avatar
    userStore.role = resp.data.role
    userStore.authorFlag = resp.data.authorFlag
    userStore.teacherFlag = resp.data.teacherFlag
  }catch (e) {
    showError({statusCode:404,statusMessage:e.message})
  }
}

// 统计总览
const handleLoadCountUserState = async () => {
  const resp = await useCountUserRelationStateApi()
  resp.data.forEach(c => { // 把一个数组对象转换成对象过程，为什么转换方便取值，否则你就要写一堆判断
    userState.value[c.sfield] = c.snum
  })
}

// 学习统计加载
const handleLoadStudyStat = (stateDataList) => {
  // 基于准备好的dom，初始化echarts实例
  if(!myChartRef.value) {
    myChartRef.value = echarts.init(document.getElementById('mainecharts'));
  }
  // 获取legend
  const legendNames = stateDataList ? stateDataList.map(c => c.name) : []
  const xAxisData = handleGetDateArray().map(c => c.md + "(" + c.week + ")")

  // 根据天数，组装成一个对象
  const bbsFullDateObj = {}
  const courseFullDateObj = {}
  const newsFullDateObj = {}
  const specialFullDateObj = {}
  const noteFullDateObj = {}
  const downloadFullDateObj = {}
  handleGetDateArray().forEach(obj => {
    bbsFullDateObj[obj.fdate] = 0
    courseFullDateObj[obj.fdate] = 0
    newsFullDateObj[obj.fdate] = 0
    specialFullDateObj[obj.fdate] = 0
    noteFullDateObj[obj.fdate] = 0
    downloadFullDateObj[obj.fdate] = 0
  });

  // 文章
  stateDataList.find(c => c.model == 'topic')?.value?.forEach(dbDate => {
    bbsFullDateObj[dbDate.datestr] = dbDate.snum
  })
  // 课程
  stateDataList.find(c => c.model == 'course')?.value?.forEach(dbDate => {
    courseFullDateObj[dbDate.datestr] = dbDate.snum
  })
  // 专题
  stateDataList.find(c => c.model == 'special')?.value?.forEach(dbDate => {
    specialFullDateObj[dbDate.datestr] = dbDate.snum
  })
  // 课程
  stateDataList.find(c => c.model == 'note')?.value?.forEach(dbDate => {
    noteFullDateObj[dbDate.datestr] = dbDate.snum
  })
  // 资源
  stateDataList.find(c => c.model == 'download')?.value?.forEach(dbDate => {
    downloadFullDateObj[dbDate.datestr] = dbDate.snum
  })
  // 开始变量学习文章
  stateDataList.find(c => c.model == 'news')?.value?.forEach(dbDate => {
    newsFullDateObj[dbDate.datestr] = dbDate.snum
  })

  // 变量对象
  var bbsArr = []
  for (var key in bbsFullDateObj) {
    bbsArr.push(bbsFullDateObj[key])
  }

  var courseArr = []
  for (var key in courseFullDateObj) {
    courseArr.push(courseFullDateObj[key])
  }


  var newsArr = []
  for (var key in newsFullDateObj) {
    newsArr.push(newsFullDateObj[key])
  }

  var noteArr = []
  for (var key in noteFullDateObj) {
    noteArr.push(noteFullDateObj[key])
  }

  var downloadArr = []
  for (var key in downloadFullDateObj) {
    downloadArr.push(downloadFullDateObj[key])
  }

  var specialArr = []
  for (var key in specialFullDateObj) {
    specialArr.push(specialFullDateObj[key])
  }

  var option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legendNames,
      x: "center",
      y: "bottom",
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel:{
        interval:0,  //类目全显
        rotate: dayRef.value > 7 ? 45:0   //顺时针旋转45度
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '学习文章',
        type: 'line',
        stack: 'Total',
        data: bbsArr
      },
      {
        name: '学习课程',
        type: 'line',
        stack: 'Total',
        data: courseArr
      },
      {
        name: '学习课程',
        type: 'line',
        stack: 'Total',
        data: noteArr
      },
      {
        name: '学习专题',
        type: 'line',
        stack: 'Total',
        data: specialArr
      },
      {
        name: '学习资源',
        type: 'line',
        stack: 'Total',
        data: downloadArr
      },
      {
        name: '文章曝光',
        type: 'line',
        stack: 'Total',
        data: newsArr
      }
    ]
  };

  // 绘制图表
  myChartRef.value.setOption(option);
}


const handleCountUserModelState = async () => {
  const resp = await useCountUserModelStateApi({day: dayRef.value})
  const dataList = resp.data;
  // 根据数据渲染统计报表
  handleLoadStudyStat(dataList)
}

// 改变天数执行统计切换
const handleChangeDay = (day) => {
  dayRef.value = day
  handleCountUserModelState()
}

const handleGetDateArray = () => {
  var arr = []
  for (let i = dayRef.value; i >= 0; i--) {
    var date = new Date()
    var newDate = new Date()
    newDate.setDate(date.getDate() - i)
    arr.push({
      fdate: formatTimeToStr(newDate, "yyyy-MM-dd"),
      "week": getWeekday(newDate),
      "md": formatTimeToStr(newDate, "MM/dd")
    })
  }
  return arr
}

function getWeekday(date) {
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekday = date.getDay();
  return weekDays[weekday];
}

onMounted(() => {
  // 数据总览调用执行
  handleLoadCountUserState()
  // 用户趋势统计
  handleCountUserModelState()
  // 用户明细
  handleGetUserInfo()
})

</script>
<style>
.el-radio-group {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 0
}

.el-radio {
  --el-radio-font-size: var(--el-font-size-base);
  --el-radio-text-color: var(--el-text-color-regular);
  --el-radio-font-weight: var(--el-font-weight-primary);
  --el-radio-input-height: .875rem;
  --el-radio-input-width: .875rem;
  --el-radio-input-border-radius: var(--el-border-radius-circle);
  --el-radio-input-bg-color: var(--el-fill-color-blank);
  --el-radio-input-border: var(--el-border);
  --el-radio-input-border-color: var(--el-border-color);
  --el-radio-input-border-color-hover: var(--el-color-primary);
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: var(--el-radio-text-color);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  font-weight: var(--el-radio-font-weight);
  height: 2rem;
  margin-right: 2rem;
  outline: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.el-radio.el-radio--large {
  height: 2.5rem
}

.el-radio.el-radio--small {
  height: 1.5rem
}

.el-radio.is-bordered {
  border: var(--el-border);
  border-radius: var(--el-border-radius-base);
  box-sizing: border-box;
  padding: 0 .9375rem 0 .5625rem
}

.el-radio.is-bordered.is-checked {
  border-color: var(--el-color-primary)
}

.el-radio.is-bordered.is-disabled {
  border-color: var(--el-border-color-lighter);
  cursor: not-allowed
}

.el-radio.is-bordered.el-radio--large {
  border-radius: var(--el-border-radius-base);
  padding: 0 1.1875rem 0 .6875rem
}

.el-radio.is-bordered.el-radio--large .el-radio__label {
  font-size: var(--el-font-size-base)
}

.el-radio.is-bordered.el-radio--large .el-radio__inner {
  height: .875rem;
  width: .875rem
}

.el-radio.is-bordered.el-radio--small {
  border-radius: var(--el-border-radius-base);
  padding: 0 .6875rem 0 .4375rem
}

.el-radio.is-bordered.el-radio--small .el-radio__label {
  font-size: .75rem
}

.el-radio.is-bordered.el-radio--small .el-radio__inner {
  height: .75rem;
  width: .75rem
}

.el-radio:last-child {
  margin-right: 0
}

.el-radio__input {
  cursor: pointer;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  outline: none;
  position: relative;
  vertical-align: middle;
  white-space: nowrap
}

.el-radio__input.is-disabled .el-radio__inner {
  border-color: var(--el-disabled-border-color)
}

.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled .el-radio__inner:after {
  background-color: var(--el-disabled-bg-color);
  cursor: not-allowed
}

.el-radio__input.is-disabled .el-radio__inner + .el-radio__label {
  cursor: not-allowed
}

.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: var(--el-disabled-bg-color);
  border-color: var(--el-disabled-border-color)
}

.el-radio__input.is-disabled.is-checked .el-radio__inner:after {
  background-color: var(--el-text-color-placeholder)
}

.el-radio__input.is-disabled + span.el-radio__label {
  color: var(--el-text-color-placeholder);
  cursor: not-allowed
}

.el-radio__input.is-checked .el-radio__inner {
  background: var(--el-color-primary);
  border-color: var(--el-color-primary)
}

.el-radio__input.is-checked .el-radio__inner:after {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1)
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--el-color-primary)
}

.el-radio__input.is-focus .el-radio__inner {
  border-color: var(--el-radio-input-border-color-hover)
}

.el-radio__inner {
  background-color: var(--el-radio-input-bg-color);
  border: var(--el-radio-input-border);
  border-radius: var(--el-radio-input-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: var(--el-radio-input-height);
  position: relative;
  width: var(--el-radio-input-width)
}

.el-radio__inner:hover {
  border-color: var(--el-radio-input-border-color-hover)
}

.el-radio__inner:after {
  background-color: var(--el-color-white);
  border-radius: var(--el-radio-input-border-radius);
  content: "";
  height: .25rem;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transition: -webkit-transform .15s ease-in;
  transition: -webkit-transform .15s ease-in;
  transition: transform .15s ease-in;
  transition: transform .15s ease-in, -webkit-transform .15s ease-in;
  width: .25rem
}

.el-radio__original {
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  outline: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1
}

.el-radio__original:focus-visible + .el-radio__inner {
  border-radius: var(--el-radio-input-border-radius);
  outline: .125rem solid var(--el-radio-input-border-color-hover);
  outline-offset: .0625rem
}

.el-radio:focus:not(:focus-visible):not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: 0 0 .125rem .125rem var(--el-radio-input-border-color-hover)
}

.el-radio__label {
  font-size: var(--el-radio-font-size);
  padding-left: .5rem
}

.el-radio.el-radio--large .el-radio__label {
  font-size: .875rem
}

.el-radio.el-radio--large .el-radio__inner {
  height: .875rem;
  width: .875rem
}

.el-radio.el-radio--small .el-radio__label {
  font-size: .75rem
}

.el-radio.el-radio--small .el-radio__inner {
  height: .75rem;
  width: .75rem
}

</style>